<?php $this->template->add_css_admin(array(
								'css/colorpicker.css',
								'css/datepicker.css',
								'css/icheck/flat/blue.css',
								'css/select2.css',
								'css/unicorn.main.css',
								'css/unicorn.grey.css',
								'css/fileinput.css',
								'css/my_css.css',
								)); 
?>
<?php ob_start();?>
<style type="text/css">
	.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all{background-color: white;border: 1px solid rgb(203, 176, 176);width: 53%;	padding: 10px 20px 10px 20px;}
	.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all li{list-style-type: none;padding-left: 0;}
	#relate_list li:before { counter-increment:section; content: counter(section)  "." ; padding-right: 10px;}
	#relate_list { list-style-type: none; margin: 0; padding: 0;width: 707px }
	#relate_list li {border: 1px solid #ededed; background-color: white; overflow: hidden;line-height: 20px;margin: 6px 3px 3px 3px;padding: 0.4em;padding-left: 1.5em;height: 33px;}
	#relate_list li span { position: absolute; margin-left: -1.3em; }
	i.error {cursor: pointer;float: right;}
	#relate_list li:hover {cursor: move;}
</style>
<?php $this->template->add_raw_html(ob_get_clean(),'tmp_css');?>
<div class="container-fluid">
		<div class="row">
		<div class="col-12">
			<div class="widget-box">
				<div class="widget-title">
					<span class="icon">
						<i class="glyphicon glyphicon-align-justify"></i>									
					</span>
					<h5>Thông tin bài viết</h5>
				</div>
				<div class="widget-content nopadding">
					<form method="post" class="form-horizontal" enctype="multipart/form-data">
						<input type="hidden" name="edit[pos_id]" value="<?php echo (isset($edit->pos_id) && $edit->pos_id != 0)?$edit->pos_id:0;?>"/>
						<div class="form-group">
							<label class="control-label">Tiêu đề bài viết</label>
							<div class="controls">
								<input name='edit[pos_title]' id="pos_title" value="<?php echo @$edit->pos_title;?>" type="text" class="form-control input-small" />
							</div>
						</div>
						<div class="form-group">
							<label class="control-label">Mô tả bài viết</label>
							<div class="controls">
								<textarea name='edit[pos_snippet]' class="form-control"><?php echo @$edit->pos_snippet;?></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label">Nội dung bài viết</label>
							<div class="controls">
								<textarea name='edit[pos_content]' class="form-control" id="pos_content"><?php echo @$edit->pos_content;?></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label">Hình ảnh bài viết</label>
							<div class="controls">
								<input id="content_images"  name='pos_name' type="file" class="file-loading" data-upload-url="<?php echo $this->url_index.'/upload_image_posts/'.$edit->pos_id;?>" data-max-file-count="10" multiple=true>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label">Hình đại diện</label>
							<div class="controls" style='width: 718px;'>
								<input id="file-0"  name='pos_name' type="file" class="file-loading" data-upload-url="<?php echo $this->url_index.'/upload_image/'.$edit->pos_id;?>" data-max-file-count="10">
								<input type="hidden" id="pos_image_path" name="edit[pos_image]" value="<?php echo @$edit->pos_image?>"
							</div>
						</div>

						<div class="form-group">
							<label class="control-label">Bài viết liên quan</label>
							<div class="controls">
								<input type="text" id="autocomplete" class="form-control input-small">
								<input type="hidden" name="edit[pos_relate]" id="relate_list_data" value=""/>
								<ul id="relate_list" class="ui-sortable">
									<?php 
										if(isset($pos_relate_resp) && $pos_relate_resp)
											foreach ($pos_relate_resp as $item) 
												echo '<li data-id="'.$item->pos_id.'"><i class="error glyphicon glyphicon-remove" onclick="_remove(this);" title="Xóa">&nbsp;</i>'.$item->pos_title.'</li>';						
									?>
								</ul>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label">Trạng thái</label>
							<div class="controls">
								<select name="edit[pos_status]">
									<option value='0' <?php echo @$edit->pos_status==0?'selected':'';?> >Nháp</option>
									<option value='1' <?php echo @$edit->pos_status==1?'selected':'';?> >Xuất bản</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label">Danh mục</label>
							<div class="controls">
								<select multiple placeholder="Danh mục bài viết" class="forn-control" name="edit[pos_categories][]">
									<?php 
									$default_value = explode(',', @$default['selCategory']);
						            foreach ($cat_tree as $key => $val) {
						                if (isset($pos_categories) && ((is_array($pos_categories)  && in_array($key,$pos_categories)) || (!is_array($pos_categories) && $key == $pos_categories)))
						                    echo '<option value="' . $key . '" selected="selected">' . $val . '</option>';
						                else
						                    echo '<option value="' . $key . '">' . $val . '</option>';
						            }
						            ?>
								</select>
							</div>
						</div>

						<div class="form-actions">
							<button type="submit" class="btn btn-primary btn-small">Save</button> or <a class="text-danger" href="#">Cancel</a>
						</div>
					</form>
				</div>
			</div>						
		</div>
	</div>
</div>

<?php
 $this->template->add_js_admin(array('js/bootstrap-colorpicker.js',
										'js/bootstrap-datepicker.js',
										'js/jquery.icheck.min.js',
										'js/select2.min.js',
										'js/unicorn.form_common.js',
										'ckeditor/ckeditor.js',
										'js/fileinput.js',
										)); 
?>
<?php ob_start();?>	
<script type="text/javascript">
	function _remove(el){
		$(el).parent().remove();
	}
	function _delete(el){
		var parent = $(el).closest('.file-preview-frame');
		var img = parent.find('img');
		console.log(img.attr('src'));
	}
	function InsertToContent(someText,altText,titleText, type) {
	var editor = CKEDITOR.instances.pos_content;
	var title= $('#pos_title').val();
	var alt= $('#pos_title').val();
		if(type =='caption')
		{
		var html = '<table class="picture" > <tbody><tr><td class="pic"><img src="'+someText+'" alt="'+altText+'" title="'+titleText+'" /></td> </tr>  <tr>  <td class="pCaption caption">&nbsp;Chú thích của ảnh</td> </tr></tbody></table> <p></p>';
		} else {
		var html = '<table class="picture" > <tbody><tr><td class="pic"><img src="'+someText+'" alt="'+altText+'" title="'+titleText+'" /></td> </tr> </tbody></table> <p></p>';
		}
		//html+= '<div class="picture"><div class="image"><img src="'+someText+'" /></div><div class="caption">Ch&uacute; th&iacute;ch của ảnh</div></div><br />';
		return editor.insertHtml(html);
		 
	}

	$(function (){
		CKEDITOR.replace( 'pos_content' ,{	entities_latin : false	});
		$("#file-0").fileinput({
			uploadUrl: "' . Url::to(['<?php echo $this->url_index.'/upload_image/'.$edit->pos_id;?>']) . '",
		    maxFileCount: 10,
		    overwriteInitial: true,
		    uploadExtraData: { img_path: '<?php echo @$edit->pos_image;?>'},
		    <?php if(isset($edit->pos_image) && $edit->pos_image != ''){?>
		    initialPreview: [
		        '<img src="<?php echo $edit->pos_image;?> " class="file-preview-image">',
		    ],
		    initialPreviewConfig: [
		        {caption: "Desert.jpg", width: "120px", url:"/site/file-delete", key:1},
		        {caption: "Tulips.jpg", width: "120px", url:"<?php echo $this->url_index.'/upload_image/'.$edit->pos_id;?>", key:2}
		    ],
		    <?php }?>
	       
	    }).on('fileuploaded', function(event, data, previewId, index) {
		    $("#pos_image_path").val(data.response.file_path);
		});


	    $("#content_images").fileinput({
			uploadUrl: "' . Url::to(['<?php echo $this->url_index.'/upload_image_posts/'.$edit->pos_id;?>']) . '",
		    maxFileCount: 10,
		    overwriteInitial: false,
		    uploadExtraData: { img_path: '<?php echo @$edit->pos_image;?>'},

	    	<?php
			if (isset($images) && $images!=NULL){
				echo 'initialPreview: [';
				foreach ($images as $row){
					echo '\'<img src="'.$row->posti_image.'" class="file-preview-image">\',';
				}
				echo '],';
			} ?>

			<?php
			if (isset($images) && $images!=NULL){
				echo 'initialPreviewConfig: [';
				foreach ($images as $row){?>
		        	{caption: "<?php echo @$edit->pos_title;?>", width: "120px", url:"<?php echo $this->url_index.'/delete_image/';?>", key:<?php echo @$row->posti_id;?>,customAttr:'data-rel="<?php echo base_url().@$row->posti_image;?>" onclick="InsertToContent($(this).attr(\'data-rel\'));" '},  
				<?php }	
				echo '],';
			} ?>

	    }).on('fileuploaded', function(event, data, previewId, index) {
		    var append_btn = $('#'+previewId).find($('.append-class'));
		    append_btn.attr('rel','<?php echo base_url();?>'+data.response.file_path)
		    				.attr('titleimg',data.response.title)
    						.attr('altimg',data.response.alt);
    		append_btn.click(function(){
    			InsertToContent($(this).attr('rel'));
    		});
		});

	    var mapping = [];
	    var source = [];
		$( "#autocomplete" ).autocomplete({
			minLength : 1,
			source: function( request, response ) {
				$.ajax({
					url: "<?php echo $this->url_index.'/do_ajax_search';?>",
					dataType: "json",
					data: {
						q: request.term , pos_id : <?php echo $edit->pos_id;?>,
					},
					type :'POST',
					success: function( data ) {
						source = [];
						$.each(data,function(i,item){
							source.push(item.pos_title);
							mapping[item.pos_title] = item.pos_id;
						});
						response(source);
					}
				});
			},
			select: function( event, ui ) {
				$('#relate_list').append('<li  class="ui-state-default" data-id="'+mapping[ui.item.label]+'"> <i class="error glyphicon glyphicon-remove" onclick="_remove(this);" title="Xóa">&nbsp;</i>'+ui.item.label+'</li>');
				setTimeout(function(){$('#autocomplete').val('');}, 200);
	        },
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
		$('form').submit(function(){
			var list = [];
			$('#relate_list li').each(function (index, item){
				list.push($(item).attr('data-id'));
			});
			$('#relate_list_data').val(list.join(';'));
		})
	});
</script>
<?php $this->template->add_raw_html(ob_get_clean()); ?>


